<template>
    <div>
        <x-header   :left-options="{showBack: false}">开课</x-header>
        <div style="margin-top:1px">
            <p class="mid_head">
                <x-button mini  class="lf tips">全部课程</x-button> 
            </p>
            <div class="show_all_class">

                <ul v-for="(item,key) in classall" class="all_class">
                    <li><i></i><span class='firstspan'>{{item.subject}}</span></li>
                    <li v-for="info in item.subclassinfo">
                        {{info.time}} {{info.address}}
                    </li>
                    <li>讲师： {{item. teacher}}</li>
                    <li class="hen">助教： {{item.assistant}}</li>
                    <li class="linkli">
                        <router-link class="to_npage"  :to="{path:'classdet',query:{classid:item.classid,page:page}}" >
                            <x-button mini  class=" rt xbutton">课程详情</x-button>
                        </router-link>
                    </li>
                    <li style="margin:0;height:10px;background-color:#f2f2f2"></li>
                </ul>
            </div>
            <div v-show="isPublish" class="add_class">
                <router-link :to="{path:'addclass',query:{page:page}}">
                    <img src="../asset/images/pub_addclass.png" alt="">
                </router-link>
            </div>
        </div>
    </div>  

   
</template>

<script>
import {XButton, XHeader, Group, XInput, } from 'vux'
import { setTimeout } from 'timers';
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
    data() {
        return {
            httpmsg:'请求异常',
            page:'classpub',
           classid:''
        }
    },
    components:{
        XHeader,
        XButton,
        Group,
        XInput,
    },

    created(){
        this.init();
    },
    computed: {
        classall () {
            var classinfo = this.$store.state.user.publishclassinfo
            return classinfo
            console.log(classall)
        },
         isPublish(){
            return this.$store.state.user.userauth.ispublish
        },
        errinfo(){
            var errinfo = this.$store.state.user.errinfo
            return errinfo
        }

    },
    methods:{
        ...mapActions({
            getPublishClass:'getPublishClass'
        }),
        init(){
            console.log("get publish class")
            this.getPublishClass({vue:this}).then(rs => {
                console.log('200',this.classall)
                console.log("getPublishClass success")
            }).catch(error => {
                //debugger
                var errinfo = this.errinfo
                if(errinfo.code===400){
                     this.$vux.toast.text(errinfo.msg, 'default')
                }else if(errinfo.response&&(errinfo.response===undefined)){
                    this.$vux.toast.text('请求超时', 'default')
                }else{
                     this.$vux.toast.text(this.httpmsg+this.errinfo.response.data.error, 'default')
                }
                console.log(error)
            })
        }
    }
}
</script>

<style>
    body{
        font-family: PingFangSC;
        margin: 0 auto; 
    }
    .lf{
        float: left;
    }
    .rt{
        float: right;
    }
    .mid_head{
        height:51px;
        background:#fff;
    }
    .mid_head .tips{
        width: 88px;
        height: 31px;
        line-height: 31px;
        font-size: 22px;
        background: #fff;
        padding: 0;
        margin-top:10px;
        margin-left:17.5px;
        font-family: PingFangSC-Regular;
    }
    .show_all_class{
        margin-bottom: 46px;
    }
    .all_class{
        background: #fff;
    }
    .all_class li:first-child{
        height:45px;
        color:#363636;
        border-bottom: 1px solid #EEEEEE 
    }
     .all_class li:nth-child(2){
        margin-top:10px;
    }
    .firstspan{
        height:15px;
        width:90px;
        margin-top:15px;
        margin-left: 4px;
        font-size: 15px;
        font-family:  PingFangSC-Medium;
    }
     .all_class .hen{
        height:32px;
        border-bottom: 1px solid #EEEEEE;
    }
    .all_class .linkli{
        height:41px;
        line-height: 41px;
        font-family: PingFangSC-Light
    }
    .all_class li:first-child>i{
        display: inline-block;
        height: 12px;
        width:2.5px;
        margin-top:15px;
        margin-left: 1px;
        background: #F25257;
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -o-transform: skew(10deg); 
        transform: skew(10deg);
    }
    .all_class li{
        font-size: 13px;
        height:22px;
        line-height:22px;
        margin-left: 17.5px;
        margin-right:16.5px;
        color:#5D5D5D ;
        font-family:  PingFangSC-Light;
        word-break:keep-all;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;   
    }
    .to_npage{
        margin:auto;
    }
    .to_npage .xbutton{
        width:69px;
        height:21px;
        margin-top:10px;
        margin-right:1px;
        font-family:  PingFangSC-Light;
        padding: 2px 8px;
        line-height:17px;
        border:0.5px solid #F25257;
        color:#F25257;
        background: #fff;
    }
    .add_class{
        width:35px;
        height:35px;
        position: fixed;
        top:86%;
        left:86%;
    }
    
</style>
